<template>
  <div class="after-data table-theme">
    <head-title title="数据-售后商品数据"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <div class="add">
            <el-button type="primary" @click="onExport">导出</el-button>
          </div>
        </div>
      </div>
      <p style="height: 30px"></p>
      <el-table :data="afterGoodsList">
        <el-table-column
          label="商品ID"
          align="center"
          prop="goods_id"
        ></el-table-column>
        <el-table-column label="品类" align="center" prop="class_name"></el-table-column>
        <el-table-column
          label="工厂名称"
          align="center"
          prop="factory_name"
        ></el-table-column>
        <el-table-column
          label="工厂ID"
          align="center"
          prop="factory_id"
        ></el-table-column>
        <el-table-column
          label="工厂编号"
          align="center"
          prop="factory_sn"
        ></el-table-column>
        <el-table-column
          label="售后订单数"
          align="center"
          prop="after_order_count"
        ></el-table-column>
        <el-table-column
          label="售后产品数"
          align="center"
          prop="after_order_goods_count"
        >
        </el-table-column>
        <el-table-column
          label="订单总数"
          align="center"
          prop="order_count"
        ></el-table-column>
        <el-table-column
          label="订单商品总数"
          align="center"
          prop="order_goods_count"
        ></el-table-column>
        <el-table-column label="售后订单占比" align="center">
          <template slot-scope="scope">
            {{ scope.row.after_order_rate }}%
          </template>
        </el-table-column>
        <el-table-column label="售后产品占比" align="center">
          <template slot-scope="scope">
            {{ scope.row.after_order_goods_rate }}%
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
          @current-change="init2"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "after_goods_data",
  components: {
  },
  data() {
    return {
      page: 1,
      list: [],
      total: 0,
      limit: 30,
      optionList: [
        {
          value: 0,
          label: "商品ID",
        },
        {
          value: 1,
          label: "工厂ID",
        },
      ],
      selectContent: "",
      classSelect: "",
      afterGoodsList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
      };
        if (this.classSelect == 0 && this.selectContent !== "") {
          data.goods_id = this.selectContent;
        } else if (this.classSelect == 1 && this.selectContent !== "") {
          data.factory_id = this.selectContent;
        }
        this.$http(this.$ApiList.AfterGoodsRanking, data).then((res) => {
          this.list = res.datas;
          this.total = this.list.length;
          if (this.list.length >= this.limit) {
            this.afterGoodsList = this.list.slice(0, this.limit);
          } else {
            this.afterGoodsList = this.list.slice(0, this.list.length);
          }
        });
    },
    init2(e) {
      this.page = e;
      this.afterGoodsList = this.list.slice(
        this.limit * (this.page - 1),
        this.limit * this.page
      );
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.list = [];
      this.selectContent = "";
      this.classSelect = 0;
      this.init();
    },
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    // 导出
    onExport(){
      let url = `${this.$domain}furniture/Adminexcel/AfterGoodsRankingDataExcel?secret=888`
      if(this.classSelect == 0 && this.selectContent !== ''){
        url += `&goods_id=${this.selectContent}`
      }
      if(this.classSelect == 1 && this.selectContent !== ''){
        url += `&factory_id=${this.selectContent}`
      }
      window.location.href = url
    }
  },
};
</script>

<style lang="scss" scoped>
</style>